<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>外卖</title>
    <link rel="icon" href="./../images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="../styles/login.css" />

</head>
<body>
<div id="login" v-loading="loading">
    <div class="divHead">登录</div>
    <div class="divContainer">
        <el-form ref="loginForm" :model="form" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
            <el-form-item prop="loginName">
                <el-input
                        ref="loginName"
                        v-model="form.loginName"
                        placeholder=" 请输入手机号码" 
                        type="text"
                        tabindex="1"
                        maxlength='20'
                        auto-complete="on"
                />
            </el-form-item>
            <div class="divSplit"></div>

            <el-form-item prop="loginPwd">
                <el-input
                        ref="password"
                        v-model="form.loginPwd"
                        placeholder=" 请输入密码" 
                        type="password"
                        tabindex="2"
                        maxlength='20'
                        auto-complete="on"
                />
            </el-form-item>

            <div class="divSplit"></div>

            <el-form-item prop="code" >
                <el-col :span="16">
                    <el-input
                            v-model="form.code"
                            auto-complete="off"
                            placeholder="验证码"
                            @keyup.enter.native="btnLogin"
                    />
                </el-col>
                <el-col :span="8">
                    <img :src="base64Image" title="看不清,点击重新加载" class="login-code-img" @click="refreshCode">
                </el-col>
            </el-form-item>

            <el-form-item class="btnSubmit">
                <el-button :loading="loading" type="primary" @click="btnLogin()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入vant样式 -->
<script src="../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../js/axios.min.js"></script>
<script src="../js/js.cookie.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script src="../api/captcha.js"></script>
<script src="../js/common.js"></script>
</body>
<script>
    new Vue({
        el:"#login",
        data(){
            return {
                form:{
                    loginName:'',
                    loginPwd: '',
                    uuid: undefined,
                    code: undefined
                },
                loginRules: {
                    loginName: [{ required: true,  message: '该值不能为空',trigger: 'blur' }],
                    loginPwd: [{ required: true, message: '该值不能为空', trigger: 'blur'}],
                    code: [{ required: true, message: '该值不能为空',trigger: 'blur' }],
                    uuid: [{ required: true, message: '该值不能为空', trigger: 'blur' }]
                },
                base64Image: '',
                loading:false
            }
        },
        created(){			
			checkTokenJumpToUser();
            this.refreshCode()
        },
        methods: {
            //获取验证码-
            refreshCode() {
                airth().then(resp => { 
                    this.form.uuid = resp.data.uuid
                    this.base64Image = resp.data.image 
                })
            },
            btnLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true

                        loginApi(this.form).then(resp=>{
                            this.loading =false
                            if(resp.code===200){
                                // 把令牌存储到 cookie中
                                Cookies.set('template_token', resp.data)
                                //跳转用户界面                            
								window.requestAnimationFrame(()=>{
									window.location.href= '/page/user.html'
								}) 
                            }else{
                                this.$notify({ type:'danger', message:resp.msg});
                            }

                        })

                    }
                })
            }
        }
    })
</script>
</html>